<template>
  <div class="echarts-box">
    <div id="myEcharts" :style="{ width: '1000px', height: '500px' }"></div>
  </div>
</template>

<script>
import { onMounted, onUnmounted, watch } from "vue";
import * as echarts from "echarts";

export default {
  name: "echartsBox",
  props: {
    EchartsData: {
      type: Array,
      default: () => []
    }
  },
  setup(props) {
    let myChart;

    onMounted(() => {
      initChart(props.EchartsData);
    });

    onUnmounted(() => {
      echarts.dispose(myChart);
    });

    watch(
      () => props.EchartsData,
      (newData) => {
        if (myChart) {
          if (newData && newData.length > 0) {
            myChart.setOption({
              yAxis: {
                data: newData.map(item => item.nickname)
              },
              xAxis: {
                max: Math.max(...newData.map(item => item.count)) + 10 
              },
              series: [{
                data: newData.map(item => ({
                  value: item.count,
                  label: {
                    show: true,
                    position: 'right',
                    formatter: '{c}', 
                    fontSize: 14
                  }
                }))
              }]
            });
          } else {
            myChart.setOption({ 
              yAxis: {
                data: []
              },
              series: [{
                data: []
              }]
            });
          }
        }
      }
    );

    function initChart(data) {
      myChart = echarts.init(document.getElementById("myEcharts"));

      const option = {
        title: {
          text: '消耗统计'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: 30,
          right: 110,
          bottom: 30,
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        yAxis: {
          type: 'category',
          splitLine: {
            show: true
          },
          axisLabel: {
            margin: 30,
            fontSize: 16,
            formatter: function (value) {
              if (value.length > 9) {
                return value.slice(0, 9) + '...'; 
              } else {
                return value;
              }
            }
          },
          data: data.map(item => item.nickname)
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            margin: 30,
            fontSize: 16,
          },
          min: 0,
          max: Math.max(...data.map(item => item.count)) + 10 
        },
        series: [{
          name: 'Count',
          type: 'bar',
          barWidth: '60%',
          data: data.map(item => ({
            value: item.count,
            label: {
              show: true,
              position: 'right', // 显示在条的右侧
              formatter: '{c}', // 显示条的值
              fontSize: 14
            }
          }))
        }]
      };

      myChart.setOption(option);

      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }

    return { initChart };
  }
};
</script>
